<template>
  <div>
    <el-form
      :model="tableList[0]"
      label-position="left"
      label-width="110px"
      size="mini"
    >
      <el-form-item
        v-for="(item, index) in tableList"
        :key="index"
        :label="item.label"
      >
        <el-input v-model="item.personnel" placeholder="请选择">
          <i
            slot="suffix"
            class="pointer el-input__icon el-icon-search"
            @click="choose(index)"
          ></i>
        </el-input>
      </el-form-item>
    </el-form>
    <el-dialog
      title="选择审批人员"
      :visible.sync="magnifyingGlassShow"
      width="1000px"
      center
      append-to-body
      :destroy-on-close="true"
    >
      <query-panel
        :form-data="queryParams"
        @handleQuery="handleQuery"
        label-width="100px"
        :spacing="18"
        :customize-type="6"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="名称：" prop="userName">
              <el-input
                v-model="queryParams.userName"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称：" prop="nickName">
              <el-input
                v-model="queryParams.nickName"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </query-panel>
      <table-panel
        ref="tablePanel"
        align="left"
        table-data="/system/user/listAllWf"
        :queryParams="queryParams"
        :columns="columns"
        @selection-change="handleSelectionChange"
        @select="selectTable"
      >
      </table-panel>
      <span slot="footer" class="dialog-footer">
        <el-button @click="magnifyingGlassShow = false" class="dialogCancel"
          >取 消</el-button
        >
        <el-button type="primary" @click="handleSelectUser" class="tableAdd"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QueryPanel from "@/components/QueryPanel/index.vue";
import TablePanel from "@/components/TablePanel/index.vue";
export default {
  components: { QueryPanel, TablePanel },
  data() {
    return {
      tableListIndex: null,
      tableList: [],
      magnifyingGlassShow: false,
      queryParams: {
        userName: "",
        nickName: "",
      },
      columns: [
        {
          type: "checkout",
          width: "50px",
        },
        {
          field: "userName",
          label: "名称",
        },
        {
          field: "nickName",
          label: "昵称",
        },
      ],
      multipleSelection: [],
      isMultiple: false,
      candidateUsersList: []
    };
  },
  methods: {
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    choose(index) {
      this.tableListIndex = index;
      this.magnifyingGlassShow = true;
    },
    // 选择框回调
    handleSelectionChange(val) {
      // 通过配置判断是否可多选
      if (this.isMultiple) {
        this.multipleSelection = val;
      } else {
        if (val.length > 1) {
          this.$refs.tablePanel.$refs.queryTable.clearSelection();
          this.$refs.tablePanel.$refs.queryTable.toggleRowSelection(val.pop());
        }
      }
    },
    selectTable(selection, row) {
      // 单选时
      if (!this.isMultiple) {
        this.multipleSelection = [row];
      }
    },
    handleSelectUser() {
      this.tableList[this.tableListIndex].personnel =
        this.multipleSelection[0].userName +
        " " +
        this.multipleSelection[0].nickName;
      this.magnifyingGlassShow = false;
      this.candidateUsersList[this.tableListIndex] = this.multipleSelection[0].userName;
    },
  },
};
</script>

<style scoped>
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>